<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" media="all" th:href="@{/admin/layui/css/layui.css}">
    <link rel="stylesheet" media="all" th:href="@{/admin/style/admin.css}">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">CPU</div>
                <div class="layui-card-body" pad15>
                    <table class="layui-table">
                        <colgroup>
                            <col width="250">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>核心数</td>
                            <td id="cpuNum"></td>
                        </tr>
                        <tr>
                            <td>用户使用率</td>
                            <td id="cpuUsed"></td>
                        </tr>
                        <tr>
                            <td>系统使用率</td>
                            <td id="cpuSys"></td>
                        </tr>
                        <tr>
                            <td>当前空闲率</td>
                            <td id="cpuFree"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">内存</div>
                <div class="layui-card-body" pad15>
                    <table class="layui-table">
                        <colgroup>
                            <col width="250">
                            <col width="250">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>内存</th>
                            <th>JVM</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>总内存</td>
                            <td id="memTotal"></td>
                            <td id="jvmTotal"></td>
                        </tr>
                        <tr>
                            <td>已用内存</td>
                            <td id="memUsed"></td>
                            <td id="jvmUsed"></td>
                        </tr>
                        <tr>
                            <td>剩余内存</td>
                            <td id="memFree"></td>
                            <td id="jvmFree"></td>
                        </tr>
                        <tr>
                            <td>使用率</td>
                            <td id="memUsage"></td>
                            <td id="jvmUsage"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body" pad15>
                    <table class="layui-table">
                        <colgroup>
                            <col width="300">
                            <col>
                            <col width="300">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>服务器名称</td>
                            <td id="computerName"></td>
                            <td>操作系统</td>
                            <td id="osName"></td>
                        </tr>
                        <tr>
                            <td>服务器IP</td>
                            <td id="computerIp"></td>
                            <td>系统架构</td>
                            <td id="osArch"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">Java虚拟机信息</div>
                <div class="layui-card-body" pad15>
                    <table class="layui-table">
                        <colgroup>
                            <col width="300">
                            <col>
                            <col width="300">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Java名称</td>
                            <td id="jvmName"></td>
                            <td>Java版本</td>
                            <td id="jvmVersion"></td>
                        </tr>
                        <tr>
                            <td>启动时间</td>
                            <td id="jvmStartTime"></td>
                            <td>运行时长</td>
                            <td id="jvmRunTime"></td>
                        </tr>
                        <tr>
                            <td>安装路径</td>
                            <td id="jvmHome"></td>
                            <td>项目路径</td>
                            <td id="sysUserDir"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">磁盘状态</div>
                <div class="layui-card-body" pad15>
                    <table class="layui-table" id="table" lay-filter="table">
                        <colgroup>
                            <col width="600">
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="sysFilesTpl">
    {{#  layui.each(d, function(index, item){ }}
    <tr>
        <td>{{item.dirName}}</td>
        <td>{{item.sysTypeName}}</td>
        <td>{{item.typeName}}</td>
        <td>{{item.total}}</td>
        <td>{{item.free}}</td>
        <td>{{item.used}}</td>
        <td>{{item.usage}}</td>
    </tr>
    {{#  }); }}
</script>
</body>
<script th:src="@{/admin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use([
        'index', 'admin', 'laytpl', 'form'
    ], function () {
        var $ = layui.$, admin = layui.admin, laytpl = layui.laytpl, form = layui.form;
        //执行 Ajax 后重载
        admin.req({
            url: 'getInfo'
            , done: function (res) {
                var data = res.data;
                cpu(data);
                mem(data);
                jvm(data);
                sys(data);
                java(data);
                sysFiles(data);
            }
        });

        function sysFiles(data) {
            laytpl(sysFilesTpl.innerHTML).render(data.sysFiles, function (html) {
                $(html).appendTo($('#table tbody:last'));
                form.render();
            });
        };

        function java(data) {
            var jvm = data.jvm;
            showText('jvmName', jvm.name);
            showText('jvmVersion', jvm.version);
            showText('jvmStartTime', jvm.startTime);
            showText('jvmRunTime', jvm.runTime);
            showText('jvmHome', jvm.home);
            showText('sysUserDir', data.sys.userDir);
        }

        function jvm(data) {
            var jvm = data.jvm;
            showText('jvmTotal', jvm.total + 'M');
            showText('jvmUsed', jvm.used + 'M');
            showText('jvmFree', jvm.free + 'M');
            showText('jvmUsage', jvm.usage + '%');
        }

        function sys(data) {
            var sys = data.sys;
            showText('computerName', sys.computerName);
            showText('computerIp', sys.computerIp);
            showText('osName', sys.osName);
            showText('osArch', sys.osArch);
        }

        function mem(data) {
            var mem = data.mem;
            showText('memTotal', mem.total + 'G');
            showText('memUsed', mem.used + 'G');
            showText('memFree', mem.free + 'G');
            showText('memUsage', mem.usage + '%');
        }

        function cpu(data) {
            var cpu = data.cpu;
            showText('cpuNum', cpu.cpuNum);
            showText('cpuUsed', cpu.used + '%');
            showText('cpuSys', cpu.sys + '%');
            showText('cpuFree', cpu.free + '%');
        }

        function showText(id, value) {
            $("#" + id).text(value);
        }
    });
</script>
</html>
